<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      header {
        width: 100%;
        height: 50px;
        background-color: lightcoral;
        text-align: center;
        line-height: 50px;
      }
      footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: lightblue;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .item {
        width: 335px;
        height: 100px;
        border: 1px solid #000;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <w-blog></w-blog>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      // 整个页面的大组件
      Vue.component("w-blog", {
        data() {
          return {
            size: 0,
            blogList: [
              {
                id: 1,
                title: "9天！沈阳方舱医院一期完工",
                content:
                  "辽宁省沈阳市方舱医院应急改造一期工程顺利完工，正式具备交付使用条件。",
              },
              {
                id: 2,
                title: "美为何“独家反对”生物武器核查机制",
                content: "美国为一己私利在俄罗斯和乌克兰之间点燃战火",
              },
              {
                id: 3,
                title: "在褒扬烈士中汇聚浩荡英雄气",
                content: "彰显了新时代党和国家对英雄烈士荣誉地位的崇高标定。",
              },
            ],
          };
        },
        template: `
          <div :style="{'font-size': size + 'px'}">
            <blog-header @big="fn"></blog-header>
            <blog-content :list="blogList"></blog-content>
            <blog-footer></blog-footer>
          </div>
        `,
        methods: {
          fn(s) {
            // console.log("123444");
            // this.size++;
            this.size = s;
          },
        },
      });

      // 微博头部组件
      Vue.component("blog-header", {
        data() {
          return {
            size: 16,
          };
        },
        template: `
          <header>微博头部 - <button @click="handleClick">+</button></header>
        `,
        mounted() {
          // 页面刚渲染完就传一次
          this.$emit("big", this.size);
        },
        methods: {
          handleClick() {
            this.size++;
            this.$emit("big", this.size);
          },
        },
      });

      // 微博内容组件
      Vue.component("blog-content", {
        props: ["list"],
        template: `
          <main>
            <blog-content-item
              v-for="item in list"
              :key="item.id"
              :title="item.title"
              :content="item.content"
            >
            </blog-content-item>
          </main>
        `,
      });

      // 内容item的组件
      Vue.component("blog-content-item", {
        props: ["title", "content"],
        template: `
          <div class="item">
            <h3>{{ title }}</h3>
            <p>{{ content }}</p>
            <blog-button title="点赞"></blog-button>
          </div>
        `,
      });

      // 微博底部组件
      Vue.component("blog-footer", {
        template: `
          <footer>
            <textarea></textarea>
            <blog-button title="发布"></blog-button>
          </footer>
        `,
      });

      // 微博的按钮组件
      Vue.component("blog-button", {
        props: ["title"],
        template: `
          <button>{{ title }}</button>
        `,
      });

      new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
